<script setup lang="ts">
	import { ref, reactive, computed } from 'vue'
	const form = reactive({
		price: '',
		paytype: '',
		bank: '',
	})
	const formBank = reactive({
		realName: '崔*强',
		bankNumber: '',
		bankName: '',
		bankArea: '',
		bankCity: '',
		bankBranch: '',
	})
	const isSubmitDisabled = computed(() => {
		return parseFloat(form.price) < 10 || !form.bank
	})
	const dialogVisible = ref(false)
	const dialogBank = ref(false)
	const tableData = ref([
		{
			withdrawalTime: '2023-10-01 10:00',
			bank: '中国银行',
			accountLast4: '1234',
			amount: '1000.00 (10.00)',
			netAmount: '990.00',
			status: '成功',
			action: '查看'
		},
		{
			withdrawalTime: '2023-10-01 10:00',
			bank: '中国银行',
			accountLast4: '1234',
			amount: '1000.00 (10.00)',
			netAmount: '990.00',
			status: '成功',
			action: '查看'
		},
		{
			withdrawalTime: '2023-10-01 10:00',
			bank: '中国银行',
			accountLast4: '1234',
			amount: '1000.00 (10.00)',
			netAmount: '990.00',
			status: '成功',
			action: '查看'
		},
		{
			withdrawalTime: '2023-10-01 10:00',
			bank: '中国银行',
			accountLast4: '1234',
			amount: '1000.00 (10.00)',
			netAmount: '990.00',
			status: '成功',
			action: '查看'
		},
		{
			withdrawalTime: '2023-10-01 10:00',
			bank: '中国银行',
			accountLast4: '1234',
			amount: '1000.00 (10.00)',
			netAmount: '990.00',
			status: '成功',
			action: '查看'
		},
		{
			withdrawalTime: '2023-10-01 10:00',
			bank: '中国银行',
			accountLast4: '1234',
			amount: '1000.00 (10.00)',
			netAmount: '990.00',
			status: '成功',
			action: '查看'
		},
	])

	const availableBalance = ref(949.99)

	const withdrawAll = () => {
		form.price = availableBalance.value.toString()
	}

	const onSubmit = () => {
		console.log('submit!')
		dialogVisible.value = true
	}
</script>

<template>
	<div class="bs-panel">
		<div class="bs-panel-body">
			<div class="bs-panel_hd">
				<div class="bs-panel_tt bold">资金提现</div>
			</div>
			<el-row :gutter="20">
				<el-col :span="10">
					<el-form :model="form" label-width="auto">
						<el-form-item label="可用余额">
							<div class="account-flex">
								<span class="text-total text-primary">
									{{ availableBalance }}
								</span>
								<span>元</span>
								<el-link style="margin-left: 15px;" type="blue" @click="withdrawAll">全部提现</el-link>
							</div>
						</el-form-item>
						<el-form-item label="充值金额">
							<div class="flex-center">
								<el-input v-model="form.price" style="width: 130px;" placeholder="请输入金额" type="number"
									@input="onInput" />
								<span class="tip-label">元 最小金额为10元</span>
							</div>
							<div class="tip-bottom">
								提现手续费 <span class="text-primary">0</span> 元 实际到账 <span class="text-primary">0</span> 元
							</div>
						</el-form-item>
						<el-form-item label="提现卡号">
							<el-select v-model="form.bank" placeholder="请选择提现卡号" style="width: 200px;">
								<el-option label="中国银行 - 9923" value="1" />
								<el-option label="中国农业银行" value="2" />
								<el-option label="深圳农商银行" value="3" />
							</el-select>
							<el-link type="blue" style="margin-left: 10px;" @click="dialogBank = true">新增+ </el-link>
						</el-form-item>
						<el-form-item label=" ">
							<el-button type="primary" size="large" @click="onSubmit" :disabled="isSubmitDisabled">
								申请提现
							</el-button>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="14">
					<div class="safe-tip">
						<div class="safe-tip-title">
							<img src="@/assets/images/tip.png" alt="">
							<span>190提现须知</span>
						</div>
						<div class="safe-tip-content">
							<p>1. 银行卡账号主要用于提现。请确保您添加的银行卡号与您身份证上的姓名一致，否则提现审核将会失败。</p>
							<p>2. 可提现金额为账户的可用余额，不包括冻结金额。<span class="text-primary">提现金额需不少于10元</span>，且不超过可用余额。</p>
							<p>3. 每账号每天最多申请提现10次，<span class="text-primary">单次提现服务手续费为1%</span>，金额四舍五入，保留小数点后 2
								位，最低收费1元。</p>
							<p>4. 如在提现过程中遇到问题，请拨打客服电话：400-8788-585，或通过微信联系在线客服：18922836153（手机微信同号）。</p>
						</div>
						<el-icon class="safe-tip-close" size="20">
							<Close />
						</el-icon>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="bs-panel-body">
			<div class="bs-panel_hd">
				<div class="bs-panel_tt bold">提现记录</div>
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="withdrawalTime" label="提现时间" width="200" />
				<el-table-column prop="bank" label="提现银行" width="140" />
				<el-table-column prop="accountLast4" label="提现账号（后4位）" width="200" />
				<el-table-column prop="amount" label="提现金额（手续费）" width="200" />
				<el-table-column prop="netAmount" label="到账金额" />
				<el-table-column prop="status" label="提现状态" />
				<el-table-column prop="action" label="操作">
					<template>
						<el-link type="primary">取消</el-link>
					</template>
				</el-table-column>
			</el-table>
			<div class="bs-panel-footer">
				<el-pagination background layout="prev, pager, next" :total="1000" />
			</div>
		</div>
	</div>
	<el-dialog v-model="dialogBank" title="添加银行卡" width="560">
		<div>
			<el-form :model="formBank" label-width="auto" style="max-width: 600px">
				<el-form-item label="真实姓名：">
					<el-input v-model="formBank.realName" placeholder="请输入真实姓名" style="width: 400px;" />
				</el-form-item>
				<el-form-item label="银行卡账号：">
					<el-input v-model="formBank.bankNumber" placeholder="请输入银行卡账号" style="width: 400px;" />
				</el-form-item>
				<el-form-item label="银行名称：">
					<el-input v-model="formBank.bankName" placeholder="请先输入银行名称" style="width: 400px;" />
				</el-form-item>
				<el-form-item label="开户地区：">
					<el-select v-model="formBank.bankArea" placeholder="请选择开户地区" style="width: 180px;">
						<el-option label="北京" value="1" />
						<el-option label="上海" value="2" />
						<el-option label="广州" value="3" />
						<el-option label="深圳" value="4" />
					</el-select>
					<el-select v-model="formBank.bankCity" placeholder="请选择" style="width: 180px;margin-left: 20px;">
						<el-option label="北京" value="1" />
						<el-option label="上海" value="2" />
						<el-option label="广州" value="3" />
						<el-option label="深圳" value="4" />
					</el-select>
				</el-form-item>
				<el-form-item label="开户支行：">
					<el-input v-model="formBank.bankBranch" placeholder="请输入开户支行" style="width: 400px;" />
				</el-form-item>
			</el-form>
		</div>

		<template #footer>
			<el-button type size="large">取 消</el-button>
			<el-button type="primary" size="large">确 定</el-button>
		</template>
	</el-dialog>
	<el-dialog v-model="dialogVisible" title="在线充值" width="600">
		<div>
			<div class="pay-weixin">
				<div class="weixin-left">
					<div class="weixin-tip">距离二维码过期还剩<span class="num">{{second}}</span>秒,
						<br>过期后请刷新图片重新获取充值二维码。
					</div>
					<div class="weixin-code">
						<img src="@/assets/img/code.png" alt="" />
						<div class="weixin-mask" v-if="isRefresh" @click="refreshClick">
							<!-- <i class="ivu-icon ivu-icon-md-refresh"></i> -->
							<div class="mask-text">刷新二维码</div>
						</div>
					</div>
					<div class="weixin-block">
						<img src="@/assets/img/scan.png" alt="" />
						<div class="weixin-">
							请使用微信扫一扫<br />扫描二维码支付
						</div>
					</div>
				</div>
				<img src="@/assets/img/weixin_scan.png" alt="" class="weixin_scan" />
			</div>
		</div>
	</el-dialog>
</template>
<style scoped lang='scss'>
	.dialog-wx {
		text-align: center;
	}

	.wx-left {
		width: 320px;
		margin-left: auto;
		margin-right: auto;
	}

	.dg-wx {
		margin-bottom: 20px;
	}

	.dg-tip {
		margin-bottom: 10px;
	}

	.bs-panel-body {
		position: relative;
	}

	.bs-panel-body:first-child:before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #e5e5e5;
	}

	.bs-panel_tip {
		display: flex;
		align-items: center;
		background-color: #fefbe8;
		border: 1px solid #fbe69a;
		margin-bottom: 15px;
		padding: 10px 15px;
		border-radius: 4px;
		font-size: 12px;
	}

	.tip-label {
		white-space: nowrap;
		margin-left: 10px;
	}

	.pay-cell {
		display: flex;
		align-items: center;
		padding: 5px;
	}

	.pay-cell img {
		margin-right: 5px;
	}

	.account-form .el-form-item {
		margin-bottom: 0;
	}

	.account-form {
		.text-total {
			font-size: 32px;
			color: #e68f36;
			margin-right: 5px;
		}

		.iconfont {
			margin: 0 10px;
		}

		.text-frozen {
			font-size: 18px;
			margin-right: 5px;
			color: #7b7b7b;
		}

		.text-balance {
			font-size: 18px;
			margin-right: 5px;
			color: #385eed;
		}
	}

	.dialog-wx {
		padding: 20px 30px 40px 30px;
	}

	.tip-bottom {
		width: 100%;
	}

	.text-total {
		font-size: 18px;
	}

	.account-flex {
		line-height: 1.2;
	}

	.safe-tip-title img {
		width: 20px;
		margin-right: 10px;
	}

	.safe-body {
		position: relative;
		padding: 0 25px;
	}

	.bs-panel-body {
		position: relative;
		padding: 25px;
	}

	.bs-panel-body:first-child:before {
		content: '';
		position: absolute;
		bottom: 0px;
		left: 20px;
		right: 20px;
		height: 1px;
		background-color: #ddd;
	}

	.form-footer,
	.form-top {
		height: 32px;
		text-align: right;
	}

	.safe-item {
		width: 400px;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.safe-item:last-child {
		margin-bottom: 0;
	}

	.safe-item .safe-label {
		width: 100px;
	}

	.safe-item .safe-value {
		flex: 1;
		color: #666;
	}

	.safe-tip-close {
		cursor: pointer;
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.safe-tip {
		position: relative;
		width: 100%;
		padding: 16px 24px;
		background-color: rgb(255, 251, 230);
		box-sizing: border-box;
		border-width: 1px;
		border-style: solid;
		border-color: rgb(255, 229, 143);
		border-radius: 4px;
	}

	.safe-tip-title {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		font-size: 16px;
	}

	.safe-tip-content p {
		color: #999;
		margin-bottom: 12px;
	}

	.weixin-tip {
		text-align: center;
	}

	.weixin-tip .num {
		color: #FF3838;
	}

	.pay-weixin {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.weixin_scan {
		width: 220px;
	}

	.weixin-tip {
		font-size: 15px;
		margin-bottom: 5px;
	}

	.weixin-code {
		margin: 0 auto;
		position: relative;
		text-align: center;
		width: 150px;
	}

	.weixin-code img {
		width: 150px;
		height: 150px;
		display: block;
	}

	.weixin-left {
		padding: 0 10px;
	}

	.weixin-block {
		background-color: #fe7676;
		color: #fff;
		width: 150px;
		margin: 5px auto 0;
		padding: 5px 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.weixin-block img {
		margin-right: 5px;
	}

	.weixin-mask {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.weixin-mask .ivu-icon {
		font-size: 18px;
		margin-right: 5px;
	}

	.modal-header2 .modal-title {
		height: 20px;
		line-height: 20px;
		font-size: 14px;
		color: #17233d;
		font-weight: 700;
	}
</style>